:root {
    // 大纲面板、工具工具栏宽度
    --toc-box-width: 380px;
    --toc-box-left: -380px;

    // 默认模式为：Light 明亮
    --vlook-color-scheme: "light";

    // --------------------
    // Light 模式的颜色值
    --doc-bg-color-light: @docBgColorLight;
    --doc-bg-color-alt-light: @docBgColorLightAlt;
    --doc-bg-color-alt-transparent-light: fade(@docBgColorLightAlt, 0%);
    --fore-color-light: @foreColorLight;
    --fore-color-alt-light: @foreColorLightAlt;
    --tips-bg-color-light: fade(@foreColorLight, 75%);
    --tips-bg-color-inset-light: fade(@foreColorDark, 75%);
    --shadow-color-light: rgba(0, 0, 0, 0.1);
    --a-color-light: @aColor;
    --a-line-color-light: @aLineColor;
    --a-active-color-light: @aActiveColor;
    --theme-bg-color-fade-light: @themeBgColorFade;
    --table-color-light: @tableColor;
    --table-border-color-light: @tableBorderColor;
    --table-th-bg-color-light: @tableThBgColor;
    --table-th-border-color-light: @tableThBorderColor;
    //   --table-td-bg-color2-light: @tableTdBgColor2;
    --img-dark-filter-light: none;
    --del-color-light: @foreColorLightAlt;
    --toc-header-num-color-light: @tocHeaderNumColor;
    --content-header-num-color-light: @contentHeaderNumColor;
    --header-color-light: @headerColor;
    --header-box-shadow-light: fade(@headerColor, 20%);
    --header-bg-start-color-light: fade(@headerColor, 0%);
    --header-bg-end-color-light: fade(@headerColor, 10%);
    --code-bg-color-light: @codeBgColor;
    --code-bg-color-transparent-light: fade(@codeBgColor, 0%);
    --code-name-bg-color-light: @foreColorLight;
    --code-name-shadow-color-light: @foreColorLight;
    --master-color-light: @masterColor;
    --slave-color-light: @slaveColor;
    --third-color-light: @thirdColor;
    --fourth-color-light: @fourthColor;
    --fifth-color-light: @fifthColor;
    --sixth-color-light: @sixthColor;
    --mermaid-master-color-light: @masterColor;
    --mermaid-master-color-alt-light: @masterColorAlt;
    --mermaid-slave-color-light: @slaveColor;
    --mermaid-slave-color-alt-light: @slaveColorAlt;
    --mermaid-third-color-light: @thirdColor;
    --mermaid-third-color-alt-light: @thirdColorAlt;
    --mermaid-fourth-color-light: @fourthColor;
    --mermaid-fourth-color-alt-light: @fourthColorAlt;
    --mermaid-fifth-color-light: @fifthColor;
    --mermaid-fifth-color-alt-light: @fifthColorAlt;
    --mermaid-sixth-color-light: @sixthColor;
    --mermaid-sixth-color-alt-light: @sixthColorAlt;

    // --------------------
    // Dark 模式的颜色值
    --doc-bg-color-dark: @docBgColorDark;
    --doc-bg-color-alt-dark: @docBgColorDarkAlt;
    --doc-bg-color-alt-transparent-dark: fade(@docBgColorDarkAlt, 0%);
    --fore-color-dark: @foreColorDark;
    --fore-color-alt-dark: @foreColorDarkAlt;
    --tips-bg-color-dark: fade(@foreColorDark, 75%);
    --tips-bg-color-inset-dark: fade(@foreColorLight, 75%);
    --shadow-color-dark: rgba(255, 255, 255, 0.1);
    --a-color-dark: @aColorDark;
    --a-line-color-dark: @aLineColor;
    --a-active-color-dark: @aActiveColor;
    --theme-bg-color-fade-dark: @themeBgColorFade;
    --table-color-dark: @tableColorDark;
    --table-border-color-dark: @tableBorderColorDark;
    --table-th-bg-color-dark: @tableThBgColorDark;
    --table-th-border-color-dark: @tableThBorderColorDark;
    //   --table-td-bg-color2-dark: @tableTdBgColor2;
    --img-dark-filter-dark: brightness(0.9);
    --del-color-dark: darken(@foreColorDark, 20%);
    --toc-header-num-color-dark: fade(@foreColorDark, 50%);
    --content-header-num-color-dark: lighten(@contentHeaderNumColor, 15%);
    --header-color-dark: @headerColorDark;
    --header-box-shadow-dark: fade(@headerColorDark, 20%);
    --header-bg-start-color-dark: fade(@headerColorDark, 0%);
    --header-bg-end-color-dark: fade(@headerColorDark, 15%);
    --code-bg-color-dark: @codeBgColorDark;
    --code-bg-color-transparent-dark: fade(@codeBgColorDark, 0%);
    --code-name-bg-color-dark: @docBgColorDark;
    --code-name-shadow-color-dark: @foreColorLightAlt;
    --master-color-dark: @masterColorDark;
    --slave-color-dark: @slaveColorDark;
    --third-color-dark: @thirdColorDark;
    --fourth-color-dark: @fourthColorDark;
    --fifth-color-dark: @fifthColorDark;
    --sixth-color-dark: @sixthColorDark;
    --mermaid-master-color-dark: @masterColorAltDark;
    --mermaid-master-color-alt-dark: @masterColor;
    --mermaid-slave-color-dark: @slaveColorAltDark;
    --mermaid-slave-color-alt-dark: @slaveColor;
    --mermaid-third-color-dark: @thirdColorAltDark;
    --mermaid-third-color-alt-dark: @thirdColor;
    --mermaid-fourth-color-dark: @fourthColorAltDark;
    --mermaid-fourth-color-alt-dark: @fourthColor;
    --mermaid-fifth-color-dark: @fifthColorAltDark;
    --mermaid-fifth-color-alt-dark: @fifthColor;
    --mermaid-sixth-color-dark: @sixthColorAltDark;
    --mermaid-sixth-color-alt-dark: @sixthColor;

    // --------------------
    // 颜色变量
    --doc-bg-color: var(--doc-bg-color-light);
    --doc-bg-color-alt: var(--doc-bg-color-alt-light);
    --doc-bg-color-alt-transparent: var(--doc-bg-color-alt-transparent-light);
    --fore-color: var(--fore-color-light);
    --fore-color-alt: var(--fore-color-alt-light);
    --tips-bg-color: var(--tips-bg-color-light);
    --tips-bg-color-inset: var(--tips-bg-color-inset-light);
    --shadow-color: var(--shadow-color-light);
    --a-color: var(--a-color-light);
    --a-line-color: var(--a-line-color-light);
    --a-active-color: var(--a-active-color-light);
    --theme-bg-color-fade: var(--theme-bg-color-fade-light);
    --table-color: var(--table-color-light);
    --table-border-color: var(--table-border-color-light);
    --table-th-bg-color: var(--table-th-bg-color-light);
    --table-th-border-color: var(--table-th-border-color-light);
    --img-dark-filter: var(--img-dark-filter-light);
    --del-color: var(--del-color-light);
    --toc-header-num-color: var(--toc-header-num-color-light);
    --content-header-num-color: var(--content-header-num-color-light);
    --header-color: var(--header-color-light);
    --header-box-shadow: var(--header-box-shadow-light);
    --header-bg-start-color: var(--header-bg-start-color-light);
    --header-bg-end-color: var(--header-bg-end-color-light);
    --code-bg-color: var(--code-bg-color-light);
    --code-bg-color-transparent: var(--code-bg-color-transparent-light);
    --code-name-bg-color: var(--code-name-bg-color-light);
    --code-name-shadow-color: var(--code-name-bg-color);
    --master-color: var(--master-color-light);
    --slave-color: var(--slave-color-light);
    --third-color: var(--third-color-light);
    --fourth-color: var(--fourth-color-light);
    --fifth-color: var(--fifth-color-light);
    --sixth-color: var(--sixth-color-light);
    --sixth-color-alt: var(--sixth-color-alt-light);
    --mermaid-master-color: var(--mermaid-master-color-light);
    --mermaid-master-color-alt: var(--mermaid-master-color-alt-light);
    --mermaid-slave-color: var(--mermaid-slave-color-light);
    --mermaid-slave-color-alt: var(--mermaid-slave-color-alt-light);
    --mermaid-third-color: var(--mermaid-third-color-light);
    --mermaid-third-color-alt: var(--mermaid-third-color-alt-light);
    --mermaid-fourth-color: var(--mermaid-fourth-color-light);
    --mermaid-fourth-color-alt: var(--mermaid-fourth-color-alt-light);
    --mermaid-fifth-color: var(--mermaid-fifth-color-light);
    --mermaid-fifth-color-alt: var(--mermaid-fifth-color-alt-light);
    --mermaid-sixth-color: var(--mermaid-sixth-color-light);
    --mermaid-sixth-color-alt: var(--mermaid-sixth-color-alt-light);
}

// 针对 Dark 黑暗模式的配置
@media (prefers-color-scheme: dark) {
    :root {
        --vlook-color-scheme: "dark";

        // --------------------
        // 颜色变量
        --doc-bg-color: var(--doc-bg-color-dark);
        --doc-bg-color-alt: var(--doc-bg-color-alt-dark);
        --doc-bg-color-alt-transparent: var(--doc-bg-color-alt-transparent-dark);
        --fore-color: var(--fore-color-dark);
        --fore-color-alt: var(--fore-color-alt-dark);
        --tips-bg-color: var(--tips-bg-color-dark);
        --tips-bg-color-inset: var(--tips-bg-color-inset-dark);
        --shadow-color: var(--shadow-color-dark);
        --a-color: var(--a-color-dark);
        --a-line-color: var(--a-line-color-dark);
        --a-active-color: var(--a-active-color-dark);
        --theme-bg-color-fade: var(--theme-bg-color-fade-dark);
        --table-color: var(--table-color-dark);
        --table-border-color: var(--table-border-color-dark);
        --table-th-bg-color: var(--table-th-bg-color-dark);
        --table-th-border-color: var(--table-th-border-color-dark);
        --img-dark-filter: var(--img-dark-filter-dark);
        --del-color: var(--del-color-dark);
        --toc-header-num-color: var(--toc-header-num-color-dark);
        --content-header-num-color: var(--content-header-num-color-dark);
        --header-color: var(--header-color-dark);
        --header-box-shadow: var(--header-box-shadow-dark);
        --header-bg-start-color: var(--header-bg-start-color-dark);
        --header-bg-end-color: var(--header-bg-end-color-dark);
        --code-bg-color: var(--code-bg-color-dark);
        --code-bg-color-transparent: var(--code-bg-color-transparent-dark);
        --code-name-bg-color: var(--code-name-bg-color-dark);
        --code-name-shadow-color: var(--code-name-shadow-color-dark);
        --master-color: var(--master-color-dark);
        --slave-color: var(--slave-color-dark);
        --third-color: var(--third-color-dark);
        --fourth-color: var(--fourth-color-dark);
        --fifth-color: var(--fifth-color-dark);
        --sixth-color: var(--sixth-color-dark);
        --mermaid-master-color: var(--mermaid-master-color-dark);
        --mermaid-master-color-alt: var(--mermaid-master-color-alt-dark);
        --mermaid-slave-color: var(--mermaid-slave-color-dark);
        --mermaid-slave-color-alt: var(--mermaid-slave-color-alt-dark);
        --mermaid-third-color: var(--mermaid-third-color-dark);
        --mermaid-third-color-alt: var(--mermaid-third-color-alt-dark);
        --mermaid-fourth-color: var(--mermaid-fourth-color-dark);
        --mermaid-fourth-color-alt: var(--mermaid-fourth-color-alt-dark);
        --mermaid-fifth-color: var(--mermaid-fifth-color-dark);
        --mermaid-fifth-color-alt: var(--mermaid-fifth-color-alt-dark);
        --mermaid-sixth-color: var(--mermaid-sixth-color-dark);
        --mermaid-sixth-color-alt: var(--mermaid-sixth-color-alt-dark);
    }

    img,
    .md-diagram-panel svg,
    .mdx-figure {
        background-image: url("") !important;
    }
}

html {
    font-size: @fontSize;
    cursor: default;
}

html,
body {
    background-color: var(--doc-bg-color);
    color: var(--fore-color);
    font-family: @textFont;
    font-weight: normal;
    line-height: 2;
    -webkit-tap-highlight-color: transparent;
}

#write {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 30px 0 30px;
}

#write>ul:first-child,
#write>ol:first-child {
    margin-top: 30px;
}

body.typora-export {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (max-width: 1000px) {
    body.typora-export {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .mdx-loading {
        font-size: 1.3em !important;
    }
}

body>*:first-child {
    margin-top: 0 !important;
}

body>*:last-child {
    margin-bottom: 0 !important;
}

img {
    //   background-image: url("");
    //   background-repeat: repeat;
    //   background-position: left top;
    //   border-radius: 15px;
    //   padding: 0;
    //   border: 2px solid var(--table-border-color);
    filter: var(--img-dark-filter);
}

a {
    color: var(--a-color) !important;
    border-bottom: @aBorderWidth solid @aLineColor;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a::after {
    // content: "🔗";
}

a:hover {
    color: @aHoverColor;
    //   border-bottom: @aBorderWidth solid fade(@aLineColor, 0%);
    box-shadow: 0 -0.5em 0 fade(@aLineColor, 30%) inset;
}

a:active {
    color: @aActiveColor;
    transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--header-color);
    position: relative;
    margin: 1em -10px 0.5em -10px;
    padding: 10px;
    line-height: 1.5;
    font-family: @headerFont;
    font-weight: bold;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 1px 0 0 var(--header-box-shadow) inset;
    background: linear-gradient(0deg, var(--header-bg-start-color), var(--header-bg-end-color));
}

h1+ul,
h1+ol,
h2+ul,
h2+ol,
h3+ul,
h3+ol,
h4+ul,
h4+ol,
h5+ul,
h5+ol,
h6+ul,
h6+ol {
    margin-top: 0;
}

h1 {
    margin-top: 3em;
    margin-bottom: 1em;
    line-height: 50px;
    font-size: 2em;
}

h2 {
    font-size: 1.8em;
}

h1+h2 {
    // h1后紧跟h2的情况，不显示边框分隔线
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h3 {
    font-size: 1.6em;
}

h2+h3 {
    // h2后紧跟h3的情况，不显示边框分隔线
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h4 {
    font-size: 1.4em;
}

h3+h4 {
    // h2后紧跟h3的情况，不显示边框分隔线
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h5 {
    font-size: 1.2em;
    box-shadow: none;
    background: none;
}

h4+h5 {
    // h2后紧跟h3的情况，不显示边框分隔线
}

h6 {
    margin-bottom: 0em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    line-height: 1;
    box-shadow: none;
    background: none;
}

h6::before {
    content: "◎ ";
    color: var(--content-header-num-color);
}

li>h6 {
    // 用于：子表
    color: var(--header-color);
    border-left: 0;
    padding-left: 0;
}

li>h6::before {
    content: "▪ ";
    color: @contentHeaderNumColor;
}

strong {
    font-family: @boldFont;
    font-weight: bold;
}

// p,
// blockquote,
// table {
//   margin: 0.2em 0;
// }

hr {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    border: 1px solid @foreColorLightAlt;
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}

body>div>h1:first-of-type {
    border-top: 0;
}

body>h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body>h3:first-child,
body>h4:first-child,
body>h5:first-child,
body>h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child>h1,
a:first-child>h2,
a:first-child>h3,
a:first-child>h4,
a:first-child>h5,
a:first-child>h6 {
    margin-top: 0;
    padding-top: 0;
}

// 配合内容块聚焦模式使用
ul>li,
ol>li,
p,
figure,
.md-diagram-panel {
    text-align: left;
}

// 有序列表下无序列表-1级
ol>li {
    list-style-type: decimal;
}

// 有序列表下无序列表-2级
ol>li>ul>li {
    list-style-type: lower-alpha;
}

// 有序列表下无序列表-3级
ol>li>ul>li>ul>li {
    list-style-type: disc;
}

// 有序列表下无序列表-4级
ol>li>ul>li>ul>li>ul>li {
    list-style-type: lower-roman;
}

// 有序列表下无序列表-5级
ol>li>ul>li>ul>li>ul>li>ul>li {
    list-style-type: circle;
}

// 有序列表下无序列表-6级
ol>li>ul>li>ul>li>ul>li>ul>li>ul>li {
    list-style-type: square;
}

// 多级无序列表-1级
ul>li {
    list-style-type: decimal;
}

// 多级无序列表-2级
ul>li>ul>li {
    list-style-type: lower-alpha;
}

// 多级无序列表-3级
ul>li>ul>li>ul>li {
    list-style-type: disc;
}

// 多级无序列表-4级
ul>li>ul>li>ul>li>ul>li {
    list-style-type: lower-roman;
}

// 多级无序列表-5级
ul>li>ul>li>ul>li>ul>li>ul>li {
    list-style-type: circle;
}

// 多级无序列表-6级
ul>li>ul>li>ul>li>ul>li>ul>li>ul>li {
    list-style-type: square;
}

ul,
ol {
    padding-left: 2em;
    padding-bottom: 0;
}

blockquote {
    border-left: 0.5em solid fade(@thirdColor, 15%);
    border-radius: 15px;
    padding: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 1em;
    color: @thirdColor;
    background-color: fade(@thirdColor, 5%);
}

blockquote>p {
    margin-bottom: 0;
}

blockquote>a {
    color: @thirdColor;
}

blockquote>ul,
blockquote>ol {
    margin-top: 0;
}


blockquote>ul>li,
blockquote>ol>li {
    color: var(--fore-color);
}

blockquote>ul>li>a,
blockquote>ol>li>a {
    color: var(--fore-color);
}

// 双重引用
blockquote>blockquote {
    border-left: 0.3em solid fade(@thirdColor, 15%);
    margin-left: 0.5em;
    margin-right: 1em;
}

// 三重，或更多重引用
blockquote>blockquote>blockquote {
    border-left: 0.15em solid fade(@thirdColor, 15%);
}

blockquote>blockquote {
    padding-right: 0;
}

blockquote>strong {
    color: inherit !important;
}

#write {
    overflow-x: auto;
}

table {
    border-collapse: inherit;
    border-spacing: 0;
    width: auto;
    line-height: 1.5;
    word-break: break-all;
    border: 2px solid var(--table-border-color);
    border-radius: 15px;
    background-color: var(--doc-bg-color);
}

table>thead>tr {
    margin: 0;
    padding: 0;
}

// 表格表头
table>thead>tr>th,
table>thead>tr>td {
    background-color: var(--table-th-bg-color);
    font-family: @boldFont;
    font-weight: bold;
    //   color: var(--table-th-color);
    border-right: 1px solid fade(@tableTdBorderColor, 10%);
    margin: 0;
    padding: 0.5em 0.5em;
    box-shadow: 0 1px 0 var(--table-th-border-color);
}

// 非首行
table>tbody>tr:not(:first-child)>td {
    box-shadow: 0 -1px 0 @tableTdBorderColor;
}

// 偶数行
table>tbody>tr:nth-child(2n) {
    background-color: @tableTdBgColor2;
}

// 表头首行的首/尾列
table>thead>tr:first-child>th:first-child {
    border-top-left-radius: 13px; // 非15px的原因是存在2px的border，避免因圆角半径不同出现空白
}

table>thead>tr:first-child>th:last-child {
    border-top-right-radius: 13px; // 非15px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的首/尾列
table>tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: 13px; // 非15px的原因是存在2px的border，避免因圆角半径不同出现空白
}

table>tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: 13px; // 非15px的原因是存在2px的border，避免因圆角半径不同出现空白
}

.mdx-table-td-bold {
    font-family: @boldFont;
    font-weight: bold;
}

table tr>td {
    border-right: 1px solid fade(@tableTdBorderColor, 10%);
    margin: 0;
    padding: 0.5em 0.5em;
}

// 表格首列
table tr>th:first-child,
table tr>td:first-child {
    padding-left: 0.5em;
}

table tr>th:last-child,
table tr>td:last-child {
    border-right: 0;
    padding-right: 0.5em;
}

table tr:last-child>td {
    border-bottom: 0;
}

// li/header下的表格增加行号
li>figure>table,
h1+figure>table,
h2+figure>table,
h3+figure>table,
h4+figure>table,
h5+figure>table,
h6+figure>table {
    counter-reset: tableRowNumber - 1;
}

li>figure>table tbody tr,
h1+figure>table tbody tr,
h2+figure>table tbody tr,
h3+figure>table tbody tr,
h4+figure>table tbody tr,
h5+figure>table tbody tr,
h6+figure>table tbody tr {
    counter-increment: tableRowNumber;
}

figure>table tr>th:first-child::before,
figure>table tr>td:first-child::before {
    content: "#";
    color: var(--toc-header-num-color);
    font-family: @codeFont;
    font-size: 0.8em;
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    left: -3em;
}

li>figure>table tbody tr>td:first-child::before {
    content: counter(tableRowNumber) " ";
}

// li下的H6下的表格行号格式微调
li>h6+figure {
    margin-left: 0em;
}

li h6+figure table tr>th:first-child::before,
li h6+figure table tr>td:first-child::before {
    left: -3em;
}

// H1-6下的表格行号格式微调
h1+figure>table tr>th:first-child::before,
h1+figure>table tr>td:first-child::before,
h2+figure>table tr>th:first-child::before,
h2+figure>table tr>td:first-child::before,
h3+figure>table tr>th:first-child::before,
h3+figure>table tr>td:first-child::before,
h4+figure>table tr>th:first-child::before,
h4+figure>table tr>td:first-child::before,
h5+figure>table tr>th:first-child::before,
h5+figure>table tr>td:first-child::before,
h6+figure>table tr>th:first-child::before,
h6+figure>table tr>td:first-child::before {
    left: -0.5em;
}

h1+figure>table tbody tr>td:first-child::before,
h2+figure>table tbody tr>td:first-child::before,
h3+figure>table tbody tr>td:first-child::before,
h4+figure>table tbody tr>td:first-child::before,
h5+figure>table tbody tr>td:first-child::before,
h6+figure>table tbody tr>td:first-child::before {
    content: counter(tableRowNumber) " ";
}

// li/header后的表格，格式微调
li>figure {
    margin-top: 0em;
}

// H1-6后的表格，格式微调
h1+figure,
h2+figure,
h3+figure,
h4+figure,
h5+figure,
h6+figure {
    margin-top: 0em;
    margin-left: 1em;
}

// 表格十字光标
.mdx-table-cross {
    width: 100px;
    height: 100px;
    position: absolute;
    display: none;
    pointer-events: none;
}

.mdx-table-cross-left {
    background: linear-gradient(90deg, fade(@aLineColor, 1%), fade(@aLineColor, 30%));
}

.mdx-table-cross-right {
    background: linear-gradient(90deg, fade(@aLineColor, 30%), fade(@aLineColor, 1%));
}

.mdx-table-cross-up {
    background: linear-gradient(0deg, fade(@aLineColor, 30%), fade(@aLineColor, 1%));
}

.mdx-table-cross-down {
    background: linear-gradient(0deg, fade(@aLineColor, 1%), fade(@aLineColor, 30%));
}

// 高亮
mark {
    background-color: rgba(255, 240, 0, 0.6) !important;
    border-radius: 0.3em;
    color: #000000;
}

mark mark {
    background: none !important;
}

// 删除
del,
del strong {
    color: var(--del-color) !important;
    text-decoration: line-through var(--fore-color) solid;
}

del code {
    text-decoration: line-through var(--fore-color) solid;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: 0.5em;
    padding-bottom: 0.5em;
}

// 弹层中的脚注行
.mdx-footer-note-content>.footnote-line {
    padding-bottom: 50px;
}

// 脚注行序号
.md-fn-count {
    font-family: @boldFont;
}

.md-fn-count:before {
    content: "[";
}

.md-fn-count:after {
    content: "] ";
}

// 脚注行序末返回链接
.reversefootnote {
    color: @masterColor;
}

.reversefootnote:hover {
    color: @slaveColor;
    transition: all 0.3s ease-in-out;
}

// 脚注上标
a[name^="ref-footnote-"] {
    font-family: @boldFont;
    color: @masterColor;
}

a[name^="ref-footnote-"]:hover {
    color: @aActiveColor;
    transition: all 0.3s ease-in-out;
}

a[name^="ref-footnote-"]:before {
    content: "[";
}

a[name^="ref-footnote-"]:after {
    content: "] ";
}

.CodeMirror {
    z-index: 0;
}

.CodeMirror-gutters {
    border-right: 1px solid @docBgColorLight;
}

.CodeMirror-linenumber {
    color: @foreColorLightAlt;
}

tt,
code {
    color: var(--fore-color);
    font-family: @codeFont;
    background-color: var(--code-bg-color);
    border-radius: 0.3em;
    padding: 0.2em 0.3em;
    margin: 0 0.2em;
    font-size: 0.8em;
    white-space: pre-wrap;
    vertical-align: middle;
}

.md-fences {
    color: @foreColorLight;
    font-family: @codeFont;
    background-color: @docBgColorLightAlt;
    border-radius: 15px;
    border: 2px solid @docBgColorLightAlt;
    padding: 1px 4px 1px 4px;
    font-size: 0.8em;
    filter: var(--img-dark-filter);
}

.task-list {
    padding-left: 0;
}

.task-list-item {
    padding-left: 32px;
}

.task-list-item input {
    top: 3px;
    left: 8px;
}

#write pre.md-meta-block {
    padding: 1em;
    font-size: 85%;
    line-height: 2;
    background-color: @foreColorLightFade3;
    border: 0;
    border-radius: 3px;
    color: @foreColorLight;
    margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
    bottom: 0.375em;
}

#write>h3.md-focus:before {
    left: -1.5625em;
    top: 0.375em;
}

#write>h4.md-focus:before {
    left: -1.5625em;
    top: 0.285714286em;
}

#write>h5.md-focus:before {
    left: -1.5625em;
    top: 0.285714286em;
}

.md-image>.md-meta {
    border: 1px solid @tableBorderColor;
    background-color: @foreColorLightFade3;
    border-radius: 3px;
    padding: 2px 4px 0 4px;
    color: inherit;
}

.md-tag {
    color: inherit;
}

// .mdx-zoom-out-write {
//   transform: scale(0.85);  
//   transform-origin: var(--zoom-out-write-x) var(--zoom-out-write-y);
// }

// .mdx-zoom-out-toolbar {
//     transform: scale(0.85);  
//     transform-origin: var(--zoom-out-toolbar-x) var(--zoom-out-toolbar-y);
// }

// .mdx-zoom-out-bread-nav {
//     transform: scale(0.85);  
//     transform-origin: var(--zoom-out-breadnav-x) var(--zoom-out-breadnav-y);
// }

.md-toc,
.mdx-toc {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    border-radius: 0;
    line-height: 2;
}

.md-toc-h1 {
    font-size: 1em;
}

.md-toc-h2 {
    font-size: 1em;
}

.md-toc-h3,
.md-toc-h4,
.md-toc-h5 {
    font-size: 1em;
}

.md-toc-h1 a,
.md-toc-h2 a,
.md-toc-h3 a,
.md-toc-h4 a,
.md-toc-h5 a {
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
}

.md-toc-h1 a:hover,
.md-toc-h2 a:hover,
.md-toc-h3 a:hover,
.md-toc-h4 a:hover,
.md-toc-h5 a:hover {
    //, .md-toc-h6 a:hover
    color: @aActiveColor;
    background-color: @transparencyColor0;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

#typora-quick-open {
    border: 1px solid @tableBorderColor;
    background-color: @foreColorLightFade3;
}

#typora-quick-open-item {
    background-color: @foreColorLightFade3;
    border-color: @tableBorderColor;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}

/** focus mode */

.on-focus-mode blockquote {
    border-left-color: @foreColorLight;
}

header,
.context-menu,
.megamenu-content,
footer {}

/**************************************
* Header Counters in TOC 目录中的标题序号样式
**************************************/

/* No link underlines in TOC */

.md-toc-content {
    counter-reset: h1toc;
}

.md-toc-h1 {
    margin-left: 0;
    padding-left: 10px;
    counter-reset: h2toc;
}

.md-toc-h2 {
    margin-left: 0;
    padding-left: 20px;
    counter-reset: h3toc;
}

.md-toc-h3 {
    margin-left: 0;
    padding-left: 30px;
    counter-reset: h4toc;
}

.md-toc-h4 {
    margin-left: 0;
    padding-left: 40px;
    counter-reset: h5toc;
}

.md-toc-h5 {
    margin-left: 0;
    padding-left: 50px;
    counter-reset: h6toc;
}

.md-toc-h6 {
    display: none;
    margin-left: 0;
    padding-left: 50px;
}

.md-toc-h1,
.md-toc-h2,
.md-toc-h3,
.md-toc-h4,
.md-toc-h5 {
    font-family: @boldFont;
    font-size: 1em;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.md-toc-h1:before,
.md-toc-h2:before,
.md-toc-h3:before,
.md-toc-h4:before,
.md-toc-h5:before {
    color: var(--toc-header-num-color);
}

.md-toc-h1>a,
.md-toc-h2>a,
.md-toc-h3>a,
.md-toc-h4>a,
.md-toc-h5>a {
    border: 0;
}

.md-toc-h1>a:hover,
.md-toc-h2>a:hover,
.md-toc-h3>a:hover,
.md-toc-h4>a:hover,
.md-toc-h5>a:hover {
    box-shadow: inherit;
    transition: all 0.3s ease-in-out;
}

.md-toc-h1>a:after,
.md-toc-h2>a:after,
.md-toc-h3>a:after,
.md-toc-h4>a:after,
.md-toc-h5>a:after {
    content: "";
}

.md-toc-h1:before {
    counter-increment: h1toc;
    content: counter(h1toc) "  ";
}

.md-toc-h1>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h2:before {
    counter-increment: h2toc;
    content: counter(h1toc) "."counter(h2toc) "  ";
}

.md-toc-h2>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h3:before {
    counter-increment: h3toc;
    content: counter(h1toc) "."counter(h2toc) "."counter(h3toc) "  ";
}

.md-toc-h3>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h4:before {
    counter-increment: h4toc;
    content: counter(h1toc) "."counter(h2toc) "."counter(h3toc) "."counter(h4toc) "  ";
}

.md-toc-h4>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h5:before {
    counter-increment: h5toc;
    content: counter(h1toc) "."counter(h2toc) "."counter(h3toc) "."counter(h4toc) "."counter(h5toc) "  ";
}

.md-toc-h5>.md-toc-inner {
    margin-left: 0;
}

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

/** initialize css counter */

#write {
    counter-reset: h1;
}

h1 {
    counter-reset: h2;
}

h2 {
    counter-reset: h3;
}

h3 {
    counter-reset: h4;
}

h4 {
    counter-reset: h5;
}

#write h1:before,
#write h2:before,
#write h3:before,
#write h4:before,
#write h5:before {
    color: var(--content-header-num-color);
}

#write h1:before {
    counter-increment: h1;
    content: counter(h1) "  ";
}

#write h2:before {
    counter-increment: h2;
    content: counter(h1) "."counter(h2) "  ";
}

#write h3:before,
h3.md-focus.md-heading:before {
    /*override the default style for focused headings */
    counter-increment: h3;
    content: counter(h1) "."counter(h2) "."counter(h3) "  ";
}

#write h4:before,
h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "  ";
}

#write h5:before,
h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "  ";
}

/** override the default style for focused headings */

#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
// #write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before {
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left: initial;
    float: none;
    top: initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/**************************************
* Electron UI
**************************************/

.outline-item {
    line-height: 1;
    font-family: @boldFont;
}

/**************************************
* 脚本化画表 CSS
**************************************/

/* ----- flow diagram 流程图 ----- */

// // 开始节点
// rect[id^="st"].flowchart {
//   fill: @foreColorLight;
//   stroke: @foreColorLight;
//   stroke-width: 5;
// }

// rect[id^="st"].flowchart + text > tspan {
//   fill: @docBgColorLight;
// }

// // 结束节点
// rect[id^="e"].flowchart {
//   fill: none;
//   stroke: var(--fore-color);
//   stroke-width: 5;
// }

// // 操作节点
// rect[id^="op"].flowchart {
//   fill: @masterColorAlt;
//   stroke: @masterColor;
//   stroke-width: 1;
// }

// // 子流程节点
// rect[id^="sub"],
// rect[id^="sub"].flowchart {
//   fill: @masterColorAlt;
//   stroke: @masterColor;
//   stroke-width: 2;
// }

// // 条件节点
// path[id^="c"].flowchart {
//   fill: @slaveColorAlt;
//   stroke: @slaveColor;
//   stroke-width: 1;
// }

// // I/O节点
// path[id^="io"].flowchart {
//   fill: @thirdColorAlt;
//   stroke: @thirdColor;
//   stroke-width: 1;
// }

// // 流程线
// path[fill="none"][stroke-width="3"][marker-end^="url(#raphael-marker-endblock"] {
//   stroke: @foreColorLight;
//   stroke-width: 2px;
// }

// // 流程线箭头
// marker[id^="raphael-marker-endblock"] > use {
//   fill: @foreColorLight;
// }

// // 文本
// text[text-anchor="start"] > tspan {
//   font-size: 14px;
//   font-family: @textFont;
//   fill: @boldColorLight;
// }

// /* ----- sequeuce diagram 时序图 ----- */

// // 标题
// rect[x="10"][y="10"][fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][rx="0"][ry="0"] {
//   fill: @docBgColorLight;
//   stroke: @foreColorLightAlt;
//   stroke-width: 2px;
// }

// // 矩形
// rect[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][rx="0"][ry="0"] {
//   fill: @masterColorAlt;
//   stroke: @masterColor;
//   stroke-width: 1px;
// }

// // 生命线
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"] {
//   // fill: none;
//   stroke: @masterColorFade;
//   stroke-width: 1px;
//   // stroke-dasharray: 5;
// }

// // 消息实线+实箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endblock"] {
//   // fill: none;
//   stroke: @foreColorLight;
//   stroke-width: 2px;
//   stroke-dasharray: none;
// }

// // 消息虚线+实箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endblock"][stroke-dasharray="6,2"] {
//   stroke-dasharray: 5;
// }

// // 消息实线+虚箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endopen"] {
//   // fill: none;
//   stroke: @foreColorLight;
//   stroke-width: 2px;
//   stroke-dasharray: none;
// }

// // 消息虚线+虚箭头
// path[fill="var(--bg-color)"][stroke="currentColor"][stroke-width="2"][marker-end^="url(#raphael-marker-endopen"][stroke-dasharray="6,2"] {
//   stroke-dasharray: 5;
// }

// // 消息虚箭头
// marker[id^="raphael-marker-endopen"] > use {
//   stroke: @foreColorLight;
// }

// // 消息文本
// rect + text[text-anchor="middle"] > tspan {
//   font-size: 14px;
//   font-family: @textFont;
//   fill: @foreColorLight;
// }

// // 实体、注释文本
// rect + rect + text[text-anchor="middle"] > tspan {
//   font-size: 14px;
//   font-family: @textFont;
//   fill: @boldColorLight;
// }

/**************************************
* mermaid CSS
**************************************/

/* ----- flow diagram 流程图 ----- */

// 标签
.mermaid .label {
    color: var(--fore-color);
    fill: @foreColorLightAlt;
}

svg[id^="mermaidChart"] {
    color: var(--fore-color);
}

// 方角矩形
.node rect[rx="0"][ry="0"] {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 5;
}

// 方角矩形文字
.node rect[rx="0"][ry="0"]+.label div {
    color: var(--fore-color);
}

// 圆角矩形
.node rect[rx="5"][ry="5"] {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

// 圆角矩形文字（默认圆角矩形、调整后的状态图圆角矩形）
.node rect[rx="5"][ry="5"]+.label div,
.node rect[rx="15"][ry="15"]+.label div {
    color: var(--fore-color);
}

// 圆形
.node circle {
    fill: none;
    stroke: var(--mermaid-third-color);
    stroke-width: 2;
}

// 圆形文字
.node circle+.label div {
    color: var(--fore-color);
}

// ？
.node ellipse {
    color: var(--fore-color);
    fill: var(--fore-color-alt);
    stroke: var(--fore-color);
    stroke-width: 10;
}

// 菱形
.node polygon[rx^="5"][ry^="5"] {
    fill: var(--mermaid-slave-color-alt);
    stroke: var(--mermaid-slave-color);
    stroke-width: 1;
}

// 菱形文字
.node polygon[rx^="5"][ry^="5"]+.label div {
    color: var(--fore-color);
}

// 不对称形状/旗形
.node polygon {
    fill: none;
    stroke: var(--mermaid-third-color);
    stroke-width: 2;
}

// 不对称形状/旗形文字
.node polygon+.label div {
    color: var(--fore-color);
}

// 线条
.edgePath .path {
    stroke: var(--fore-color);
    stroke-width: 2;
}

// 线条箭头
.arrowheadPath {
    fill: var(--fore-color);
}

// 线条文本
.edgeLabel {
    color: var(--fore-color);
    background-color: var(--doc-bg-color);
    font-family: @textFont;
    font-size: 1em;
    line-height: 2em;
}

// 子图
.cluster rect {
    fill: var(--doc-bg-color-alt) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 3;
    rx: 15 !important;
    ry: 15 !important;
}

// 子图文本
.cluster text {
    color: var(--fore-color);
    fill: var(--fore-color);
}

// 自定义：流程图「开始」样式
#START rect {
    fill: var(--fore-color);
    stroke: var(--fore-color);
    stroke-width: 5;
    rx: 15 !important;
    ry: 15 !important;
}

#START rect+.label div {
    color: var(--doc-bg-color);
}

// 自定义：流程图「结束」节点样式
#END rect {
    color: var(--fore-color);
    fill: none;
    stroke: var(--fore-color);
    stroke-width: 5;
    rx: 15;
    ry: 15;
}

#END rect+.label div {
    color: var(--fore-color);
}

// 自定义：状态图「初始」状态样式
#INIT circle {
    fill: var(--fore-color);
    stroke: var(--fore-color);
    stroke-width: 5;
}

#INIT .label div {
    color: var(--doc-bg-color);
}

// 与「初始」状态同级的所有矩形节点
#INIT~g>rect {
    fill: var(--mermaid-fifth-color-alt);
    stroke: var(--mermaid-fifth-color);
    stroke-width: 3;
    rx: 15 !important;
    ry: 15 !important;
}

// 自定义：状态图「最终」状态节点样式
#FINAL circle {
    fill: none;
    stroke: var(--fore-color);
    stroke-width: 5;
}

/* ----- sequeuce diagram 时序图 ----- */

// 角色
.actor {
    stroke: var(--mermaid-master-color);
    fill: var(--mermaid-master-color-alt);
}

.actor-person {
    stroke: var(--mermaid-slave-color);
    fill: var(--mermaid-slave-color-alt);
}

// 角色文本
text.actor {
    fill: var(--fore-color);
    stroke: none;
}

// 角色生命线
.actor-line {
    stroke: var(--mermaid-master-color);
}

.actor-line-person {
    stroke: var(--mermaid-slave-color);
}

// 实线消息
.messageLine0 {
    stroke-width: 2;
    stroke: var(--fore-color);
}

// 实线箭头
#arrowhead {
    fill: var(--fore-color);
}

// 虚线消息
.messageLine1 {
    stroke-width: 2;
    stroke: var(--fore-color);
}

// 异步消息箭头
#crosshead path {
    fill: var(--fore-color-alt) !important;
    stroke: var(--fore-color) !important;
}

// 消息文本
.messageText {
    fill: var(--fore-color);
    stroke: none;
    font-family: @textFont;
    font-size: 1em;
    line-height: 2em;
}

// 角标背景
.labelBox {
    stroke: none;
    fill: var(--mermaid-slave-color-alt);
}

// 角标文本
.labelText {
    fill: var(--mermaid-slave-color);
    stroke: none;
}

.labelText tspan {
    fill: var(--mermaid-slave-color);
    stroke: none;
}

// 循环文本
.loopText {
    fill: var(--mermaid-slave-color);
    stroke: none;
}

.loopText tspan {
    fill: var(--mermaid-slave-color);
    stroke: none;
}

// 循环线
.loopLine {
    stroke-width: 1;
    stroke: var(--mermaid-slave-color);
}

// 备注背景
.note {
    stroke: var(--mermaid-third-color);
    stroke-dasharray: 2;
    fill: var(--mermaid-third-color-alt);
}

// 备注文本
.noteText,
.noteText tspan {
    fill: var(--fore-color);
    stroke: none;
    font-family: @textFont;
    font-size: 1em;
    line-height: 2em;
}

/* ----- gantt diagram 甘特图 ----- */

.section {
    stroke: none;
}

.section0 {
    fill: var(--fore-color-alt);
}

.section2 {
    fill: var(--fore-color-alt);
}

.section1,
.section3 {
    fill: @foreColorLightFade3;
}

.sectionTitle0,
.sectionTitle1,
.sectionTitle2,
.sectionTitle3 {
    fill: var(--fore-color);
}

.sectionTitle {
    text-anchor: start;
    font-size: 0.8em;
    line-height: 2em;
}

.grid .tick {
    stroke: var(--fore-color-alt);
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.today {
    fill: none;
    stroke: var(--mermaid-slave-color);
    stroke-width: 3px;
}

.task {
    stroke-width: 2;
}

.taskText {
    text-anchor: middle;
    font-size: 0.8em;
    line-height: 2em;
}

.taskTextOutsideRight {
    fill: var(--fore-color);
    text-anchor: start;
}

.taskTextOutsideLeft {
    fill: var(--fore-color);
    text-anchor: end;
}

/* 当前的任务 */

.active0,
.active1,
.active2,
.active3 {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
}

.activeText0,
.activeText1,
.activeText2,
.activeText3 {
    fill: var(--mermaid-master-color) !important;
}

/* 已完成的任务 */

.done0,
.done1,
.done2,
.done3 {
    stroke: none;
    fill: var(--mermaid-master-color-alt);
    stroke-width: 2;
    stroke-dasharray: 2;
}

/* 未来的任务 */

.task0,
.task1,
.task2,
.task3 {
    fill: var(--doc-bg-color);
    stroke: var(--mermaid-master-color);
    stroke-dasharray: 2;
}

.taskText0,
.taskText1,
.taskText2,
.taskText3 {
    fill: var(--fore-color);
}

.taskTextOutside0,
.taskTextOutside2 {
    fill: var(--fore-color);
}

.taskTextOutside1,
.taskTextOutside3 {
    fill: var(--fore-color);
}

.doneText0,
.doneText1,
.doneText2,
.doneText3 {
    fill: var(--fore-color) !important;
}

/* 当前关键路径的任务 */

.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
    stroke: var(--mermaid-slave-color);
    fill: var(--mermaid-slave-color-alt);
    stroke-width: 2;
}

.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
    fill: var(--mermaid-slave-color) !important;
}

/* 已完成的关键路径任务 */

.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
    stroke: none;
    fill: var(--mermaid-slave-color-alt);
    stroke-width: 2;
    cursor: pointer;
    shape-rendering: crispEdges;
}

/* 未来的关键路径任务 */

.crit0,
.crit1,
.crit2,
.crit3 {
    stroke: var(--mermaid-slave-color);
    fill: var(--doc-bg-color);
    stroke-width: 2;
    stroke-dasharray: 2;
}

.critText0,
.critText1,
.critText2,
.critText3 {
    fill: var(--fore-color);
}

.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
    fill: var(--fore-color) !important;
}

/* 标题 */
.titleText {
    text-anchor: middle;
    font-size: 1.3em;
    line-height: 2em;
    fill: var(--fore-color);
}

/* ----- class diagram 类图 ----- */

g.classGroup text {
    fill: var(--fore-color);
    stroke: none;
}

g.classGroup rect {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
}

g.classGroup line {
    stroke: var(--fore-color);
    stroke-width: 1;
}

svg .classLabel .box {
    stroke: none;
    stroke-width: 0;
    fill: var(--mermaid-master-color-alt);
    opacity: 0.5;
}

svg .classLabel .label {
    fill: var(--mermaid-master-color-alt);
}

.relation {
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
    fill: none;
}

.composition {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#compositionStart {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#compositionEnd {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

.aggregation {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--fore-color);
    stroke-width: 1;
}

#aggregationStart {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#aggregationEnd {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#dependencyStart {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#dependencyEnd {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#extensionStart {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

#extensionEnd {
    fill: var(--mermaid-master-color-alt);
    stroke: var(--mermaid-master-color);
    stroke-width: 1;
}

.node text {}

div.mermaidTooltip {
    position: absolute;
    text-align: center;
    max-width: 200px;
    padding: 2px;
    background: var(--fore-color-alt);
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    pointer-events: none;
    z-index: 100;
}

/**************************************
* 重定义Typora原生样式
**************************************/

#write {
    padding-left: 20px;
    padding-right: 20px;
}

.CodeMirror.cm-s-inner {
    border-radius: 15px;
}

/* 数学公式 */
.MathJax_SVG,
.MathJax_SVG_Display {
    border: 2px solid var(--theme-bg-color-fade);
    border-radius: 0.3em;
    padding: 0.3em 0.3em;
}

.MathJax_SVG_Display>.MathJax_SVG {
    border: none;
}

.MathJax_SVG:hover,
.MathJax_SVG_Display:hover {
    border-color: @aLineColor;
}

.MathJax_SVG:active,
.MathJax_SVG_Display:active {
    background-color: var(--doc-bg-color);
    transform: scale(1.5);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.MathJax_SVG_Display>.MathJax_SVG:active {
    transform: none;
}

.MathJax_SVG g text {
    font-family: @textFont;
    color: var(--fore-color);
}

// .md-math-block .MathJax_SVG_Display {
//   text-align: left;
// }
// 
// .md-math-block .MathJax_SVG_Display:active {
//   background-color: var(--doc-bg-color);
//   transform: scale(2);
//   transition: all 0.3s ease-in-out;
//   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
// }
// 
// .md-math-block .MathJax_SVG_Display .MathJax_SVG:active {
//   transform: scale(1);
// }

/* md 系统样式 */
.md-toc-inner {
    text-decoration: none;
    box-shadow: none;
}

.md-toc-item {}

.md-toc-item:hover {
    box-shadow: 0 -1px 0 var(--a-line-color) inset;
    transition: all 0.3s ease-in-out;
}

.md-toc-item:active {
    box-shadow: 0 -1px 0 var(--a-active-color) inset;
    transition: all 0.3s ease-in-out;
}

.md-toc-item>a {
    color: var(--fore-color);
}

.md-toc-item:hover>a,
.md-toc-item a:hover {
    color: var(--a-line-color);
    transition: all 0.3s ease-in-out;
}

.md-toc-item:active>a,
.md-toc-item a:active {
    color: var(--a-active-color);
    transition: all 0.3s ease-in-out;
}

#svg-figure-content {
    margin: 5px;
    padding: 5px;
    border-radius: 0.3em;
    cursor: pointer;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}


sup.md-footnote {
    background-color: inherit;
}

sup.md-footnote>a {
    color: var(--a-line-color) !important;
    margin-left: 0.5em;
    margin-right: 0.5em;
    box-shadow: none;
    border-bottom: none;
}

sup.md-footnote>a:hover {
    //   color: var(--a-line-color);
    box-shadow: 0 -0.5em 0 fade(@aLineColor, 30%) inset;
    border-bottom: 0;
}

.footnote-line>a:not(.reversefootnote) {
    color: var(--fore-color);
}

kbd {
    font-family: @codeFont;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 0.3em;
    margin: 0 0.2em;
    padding: 0em 0.3em;
    background-color: var(--doc-bg-color);
    color: var(--fore-color);
    border: 0.1em solid var(--fore-color-alt);
    box-shadow: 0 0.1em 0 var(--fore-color-alt);
}

// task list - 1
ul>.md-task-list-item {
    list-style-type: decimal !important;
}

// task list - 2
ul>li>ul>.md-task-list-item {
    list-style-type: upper-alpha !important;
}

// task list - 3
ul>li>ul>li>ul>.md-task-list-item {
    list-style-type: lower-alpha !important;
}

// task list - 4
ul>li>ul>li>ul>li>ul>.md-task-list-item {
    list-style-type: disc !important;
}

// task list - 5
ul>li>ul>li>ul>li>ul>li>ul>.md-task-list-item {
    list-style-type: circle !important;
}

// task list - 6
ul>li>ul>li>ul>li>ul>li>ul>li>ul>.md-task-list-item {
    list-style-type: square !important;
}

// task list checkbox
.md-task-list-item>input {
    margin-left: -0.5em !important;
    margin-top: 0.3em !important;
}

// task list text
.md-task-list-item>p {
    margin-left: 1.2em !important;
    margin-top: 0;
    margin-bottom: 0;
}

li> :first-child,
li p {
    margin-top: 0;
    margin-bottom: 0;
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// 非衬线字体集
.mdx-font-header-sans {
    font-family: @sansFont  !important;
}

.mdx-font-title-sans {
    font-family: @sansFont  !important;
}

.mdx-font-text-sans {
    font-family: @sansFont  !important;
}

.mdx-font-bold-sans {
    font-family: @sansFont  !important;
}

.mdx-font-code-sans {
    font-family: @codeFont  !important;
}

// 衬线字体集
.mdx-font-header-serif {
    font-family: @headerFont  !important;
}

.mdx-font-title-serif {
    font-family: @titleFont  !important;
}

.mdx-font-text-serif {
    font-family: @textFont;
}

.mdx-font-bold-serif {
    font-family: @boldFont  !important;
}

.mdx-font-code-serif {
    font-family: @codeFont  !important;
}

.mdx-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    //   background: radial-gradient(circle at calc(~"var(--spotlightX) * 1px") calc(~"var(--spotlightY) * 1px"), rgba(255, 255, 255, 0) calc(~"var(--spotlightR) * 1px"), rgba(0, 0, 0, 0.7) calc(~"var(--spotlightR) * 1px + 1px"));
    background-size: cover;
    pointer-events: none;
    z-index: 99999;
}

.mdx-tool-tips,
.mdx-info-tips {
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 0.5em 1em;
    text-align: center;
    white-space: nowrap;
    border-radius: 15px;
    font-family: @boldFont;
    color: var(--doc-bg-color);
    background-color: var(--tips-bg-color);
    z-index: 8000;
}

.mdx-tool-tips {
    border-top: 2px solid @aLineColor;
    text-align: left;
}

.mdx-tool-tips strong,
.mdx-info-tips strong {
    color: var(--doc-bg-color);
}

.mdx-tool-tips a,
.mdx-info-tips a {
    color: var(--doc-bg-color) !important;
    font-weight: bold;
}

.mdx-loading {
    cursor: wait;
    position: fixed;
    color: @themeForeColor;
    //   background-color: @themeBgColor;
    background: linear-gradient(@themeBgColor 40%, @themeBgColorFade);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: @titleFont;
    font-size: 1.5em;
    overflow: auto;
    z-index: 9000;
}

@keyframes breathe {
    0% {
        opacity: 1;
        transform: scale(1.0);
    }

    100% {
        opacity: 0.5;
        transform: scale(0.98);
    }
}

.mdx-loading-tips {
    padding: 2em 2em 1em 2em;
    animation: 1.5s breathe infinite alternate;
}

.mdx-loading-tips>div {
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1.2em;
}

.mdx-loading-done {
    cursor: not-allowed;
    padding-left: 1em;
    padding-right: 1em;
    color: @themeBgColor;
    background-color: @themeForeColor;
    font-family: @boldFont;
    font-weight: normal;
    display: inline-block;
    border-radius: 1em;
    margin-bottom: 2em;
    transition: all 0.3s ease-in-out;
}

.mdx-loading-done:hover {
    color: @themeForeColor;
    background-color: @aHoverColor;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    transform: translateY(-2px);
}

.mdx-loading-done:active {
    transform: none;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

// 用于列表项、段落聚焦模式
.mdx-current-blockfocus-item {
    box-shadow: 0 0 10px 0 @aLineColor;
    border-radius: 15px;
}

.md-diagram-panel svg {
    width: 100%;
}

.mdx-blockquote-folder:hover {
    color: @thirdColorDark;
    transition: all 0.3s ease-in-out;
}

.mdx-toc-box {
    background-color: var(--doc-bg-color-alt);
    border-radius: 15px;
    cursor: default;
    display: block;
    left: var(--toc-box-left);
    top: 10px;
    bottom: 40px;
    width: var(--toc-box-width);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

// .mdx-toc-box:hover,
// .mdx-footer-note:hover {
//   box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--fore-color) inset;
// }

.mdx-toc-box-header {
    color: @foreColorLight;
    font-family: @boldFont;
    font-size: 1.2em;
    // width: 100%;
    height: 70px;
    padding: 10px 0 0 0;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 40px, var(--doc-bg-color-alt-transparent));
    left: 2px;
    right: 2px;
    top: 2px;
    position: absolute;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    z-index: 100;
}

.mdx-toc-box-title {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 30px;
    line-height: 30px;
    //   border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1em;
    font-family: @boldFont;
    font-weight: bold;
    color: var(--a-color);
    cursor: pointer;
}

.mdx-toc-box-title:hover {
    color: @aHoverColor;
    border-bottom: 1px solid @aHoverColor;
    transition: all 0.3s ease-in-out;
}

.mdx-toc-box-title:active {
    color: @aActiveColor;
    transition: all 0.3s ease-in-out;
}

.mdx-toc-box-body-scroll {
    width: 100%;
    height: 100%;
    padding: 0;
    padding-top: 40px;
    padding-bottom: 10px;
    border-radius: 15px;
    overflow: auto;
    overflow-y: hidden;
    z-index: 99;
}

.mdx-toc-box-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 10px 0;
    overflow-y: scroll;
    z-index: 99;
}

.mdx-toc-box-footer {
    font-size: 0.8em;
    font-family: @boldFont;
    //   width: 100%;
    height: 50px;
    line-height: 40px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    text-align: center;
    padding: 0;
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 10px, var(--doc-bg-color-alt-transparent));
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    position: absolute;
    z-index: 100;
}

.mdx-copyright,
.mdx-copyright a {
    color: #fff;
}

.mdx-copyright {
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    font-size: 0.8em;
    font-family: @boldFont;
    position: absolute;
    text-shadow: 0 0 5px #000;

}

.mdx-float-card {
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3), @contrastBorder;
    //   border: 1px solid rgba(255, 255, 255, 0.2);
    //   border-top-width: 0;
}

.mdx-header-shadow {
    //   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    //   border-top-right-radius: 15px;
    //   border-top-left-radius: 15px;
}

.mdx-footer-shadow {
    //   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
    //   border-bottom-right-radius: 15px;
    //   border-bottom-left-radius: 15px;
}

.mdx-footer-note {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: -200px;
    height: 200px;
    border-radius: 15px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    background-color: var(--doc-bg-color-alt);
    ;
    display: none;
    z-index: 5000;
}

.mdx-footer-note>a {
    color: var(--fore-color);
}

.mdx-footer-note-header {
    height: 30px;
    top: 2px;
    left: 2px;
    right: 2px;
    position: absolute;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 5px, var(--doc-bg-color-alt-transparent));
    border-radius: 15px;
}

.mdx-footer-note-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

.mdx-footer-note-toolbar {
    font-weight: bold;
    height: 60px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    line-height: 70px;
    bottom: 0;
    padding: 0 20px;
    margin: 2px;
    border-radius: 15px;
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 35px, var(--doc-bg-color-alt-transparent));
    position: absolute;
}

.mdx-toolbar {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    left: 10px;
    top: 0;
    width: var(--toc-box-width);
    height: 50px;
    position: fixed;
    background-color: fade(@themeBgColor, 75%);
    //   opacity: 0.85;
    transition: opacity 1s ease-in-out;
    z-index: 100;
}

.mdx-toolbar:hover {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.mdx-btn-outline {
    display: flex;
    justify-content: center;
    align-items: center;
    color: @docBgColorLight;
    background-color: @foreColorLight;
    cursor: pointer;
    float: left;
    width: 30px;
    height: 30px;
    padding-top: 0;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    visibility: visible;
}

// .mdx-btn-outline > #svgOutline {
// }

.mdx-header-current {
    //   background-color: var(--code-bg-color);
    background: linear-gradient(90deg, var(--code-bg-color-transparent), var(--theme-bg-color-fade), var(--code-bg-color-transparent));
}

.mdx-header-current a {
    font-weight: bold;
    //   color: var(--figure-alt-color) !important;
}

.mdx-header-current a:after {}

.mdx-folder {
    color: @foreColorLightAlt;
    float: left;
    width: 16px;
    text-align: center;
}

.mdx-folder:hover {
    color: @aActiveColor;
    transition: all 0.3s ease-in-out;
}

.mdx-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @docBgColorLight;
    background-color: @buttonBgColor;
    cursor: pointer;
    padding: 0;
    font-size: 0.8em;
    width: 40px;
    height: 30px;
    border-radius: 8px;
}

.mdx-btn-hover:hover {
    background-color: @aHoverColor;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    transform: translateY(-2px);
}

.mdx-btn-leave {
    background-color: @buttonBgColor;
    transition: all 0.3s ease-in-out;
    transform: none;
}

.mdx-btn:active {
    background-color: @aActiveColor;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
    transform: none;
}

// .mdx-btn2 {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   vertical-align: middle;
//   color: @docBgColorLight;
//   background-color: @foreColorLightAlt;
//   cursor: pointer;
//   padding: 0;
//   font-size: 0.8em;
//   width: 30px;
//   height: 30px;
//   border-radius: 8px;
// }

// .mdx-btn2-hover:hover {
//   background-color: @foreColorLight;
//   transition: all 0.3s ease-in-out;
//   transform: scale(1.1);
// }

// .mdx-btn2-leave {
//   background-color: @foreColorLightAlt;
//   transition: all 0.3s ease-in-out;
//   transform: scale(1);
// }

// .mdx-btn2:active {
//   background-color: @aActiveColor;
//   box-shadow: none;
//   transition: all 0.3s ease-in-out;
//   transform: scale(1);
// }

.mdx-btn-nav-back {
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    visibility: hidden;
    display: none;
}

.mdx-btn-nav-forward {
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    visibility: hidden;
    display: none;
}

.mdx-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-left-radius: 15px;
}

.mdx-nav-prev:hover {
    background: linear-gradient(to right, fade(@aHoverColor, 70%), fade(@aHoverColor, 0%));
    transition: all 0.3s ease-in-out;
}

.mdx-nav-prev:active {
    background: none;
    transition: all 0.3s ease-in-out;
}

.mdx-nav-prev-text {
    top: 0;
    left: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: @boldFont;
    color: @themeForeColor;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    display: none;
}

.mdx-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-right-radius: 15px;
}

.mdx-nav-next:hover {
    background: linear-gradient(to left, fade(@aHoverColor, 70%), fade(@aHoverColor, 0%));
    transition: all 0.3s ease-in-out;
}

.mdx-nav-next:active {
    background: none;
    transition: all 0.3s ease-in-out;
}

.mdx-nav-next-text {
    top: 0;
    right: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: @boldFont;
    color: @themeForeColor;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    display: block;
}

.mdx-bread-nav {
    background-color: fade(@themeBgColor, 75%);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    top: -50px;
    left: 10px;
    right: 10px;
    height: 50px;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    transition: all 0.3s ease-in-out;
}

.mdx-bread-nav-text {
    color: @themeForeColor;
    font-family: @boldFont;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    margin-left: 40px;
    margin-right: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    height: 50px;
    cursor: pointer;
    display: block;
}

.mdx-bread-nav-text:hover {
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), fade(@aHoverColor, 70%), fade(@aHoverColor, 0%));
    transition: all 0.3s ease-in-out;
}

.mdx-bread-nav-text:active {
    background: none;
    transition: all 0.3s ease-in-out;
}

.mdx-btn-fullscreen {
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    display: none;
}

.mdx-btn-color-scheme {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
}

.mdx-btn-font-style {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
}

.mdx-btn-figure-launcher {
    margin-top: 10px;
    margin-left: 10px;
    visibility: hidden;
    float: left;
}

.mdx-btn-spotlight {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
}

.mdx-btn-print {
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 20px;
    float: right;
    //   display: none;
}

.mdx-figure-viewer {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    display: none;
    z-index: 4000;
}

.mdx-btn-prev-figure {
    left: 10px;
    top: auto;
    box-shadow: @contrastBorder;
    border-radius: 15px;
    position: absolute;
    bottom: 10px;
}

.mdx-btn-next-figure {
    right: 10px;
    top: auto;
    box-shadow: @contrastBorder;
    border-radius: 15px;
    position: absolute;
    bottom: 10px;
}

.mdx-btn-close-figure-viewer {
    right: 10px;
    top: 10px;
    box-shadow: @contrastBorder;
    border-radius: 15px;
    position: absolute;
}

.mdx-figure-action {
    border-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: @contrastBorder;
    position: absolute;
    z-index: 10;
}

img,
.md-diagram-panel svg,
.mdx-figure {
    background-image: url("");
    background-repeat: repeat;
    background-position: left top;
    border-radius: 15px;
    padding: 0;
    border: 2px solid var(--table-border-color);
    display: block;
    transition: all 0.3s ease-in-out;
}

// .mdx-figure-hover,
img:hover,
.mdx-figure:hover,
table:hover {
    border-color: @aHoverColor  !important;
    transition: all 0.3s ease-in-out;
}

// 指定在 Dark Mode 时反转的图片样式
.mdx-img-invert-in-dark {
    filter: invert(1);
    border-color: @imgInvertInDarkBorderColor  !important;
}

// 指定在 Dark Mode 时反转的图片的hover样式（先使用反色，这样在反转时则能保持与色一致）
.mdx-img-invert-in-dark:hover {
    border-color: rgb(255 - red(@aHoverColor),
            255 - green(@aHoverColor),
            255 - blue(@aHoverColor)) !important;
}

.mdx-figure-bg-dark {
    background-image: url("") !important;
    //   background-repeat: repeat;
    //   background-position: left top;
}

.mdx-figure-content {
    margin: 5px;
    padding: 5px;
    cursor: pointer;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--fore-color);
}

.mdx-figure-pagenum {
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.mdx-figure-alt {
    text-align: center;
    display: inline-block;
    border-radius: 15px;
    background-color: var(--doc-bg-color-alt);
    transition: all 0.3s ease-in-out;
}

.mdx-figure-alt>span {
    color: var(--fore-color);
    font-size: 0.8em;
    font-family: @boldFont;
}

// .mdx-figure-alt-hover {
//   color: @aHoverColor;
//   background-color: @themeBgColor !important;
// }

.mdx-figure-alt hr {
    border-bottom: 2px solid @foreColorLightAlt;
    margin: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

use.mdx-svg-ico-light {
    fill: @themeForeColor;
}

use.mdx-svg-ico-dark {
    fill: @foreColorLightAlt;
}

use.mdx-svg-ico-dark:hover {
    fill: @slaveColor;
    transition: all 0.3s ease-in-out;
}

.mdx-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    //   opacity: 0.5;
    display: none;
    z-index: 1000;
}

.mdx-backdrop-blurs {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.mdx-click-bubble {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    position: fixed;
    background-color: @slaveColor;
    opacity: 0.7;
    z-index: 9999;
}

// 标签式公用样式（风格2）
.mdx-code-c1,
.mdx-code-c2,
.mdx-code-c3,
.mdx-code-c4,
.mdx-code-c5,
.mdx-code-c6 {
    font-family: @boldFont;
    font-weight: bold;
    color: @docBgColorLight;
    padding: 0.2em 0.4em;
    border-radius: 0.5em;
}

.mdx-code-c1 {
    background-color: var(--master-color);
    box-shadow: 0 0 0 1px var(--master-color-light) inset;
}

.mdx-code-c2 {
    background-color: var(--third-color);
    box-shadow: 0 0 0 1px var(--third-color-light) inset;
}

.mdx-code-c3 {
    background-color: var(--fourth-color);
    box-shadow: 0 0 0 1px var(--fourth-color-light) inset;
}

.mdx-code-c4 {
    background-color: var(--slave-color);
    box-shadow: 0 0 0 1px var(--slave-color-light) inset;
}

.mdx-code-c5 {
    background-color: var(--fifth-color);
    box-shadow: 0 0 0 1px var(--fifth-color-light) inset;
}

.mdx-code-c6 {
    background-color: var(--sixth-color);
    box-shadow: 0 0 0 1px var(--sixth-color-light) inset;
}

// 药丸样式右边公共样式（风格1/2）
.mdx-code-name1,
.mdx-code-name2,
.mdx-code-name3,
.mdx-code-name4,
.mdx-code-name5,
.mdx-code-name6 {
    font-family: @boldFont;
    font-weight: normal !important;
    margin-right: 0;
    border-radius: 0.5em 0em 0em 0.5em;
    padding: 0.2em 1em 0.2em 0.4em;
    color: @docBgColorLight;
    background: var(--code-name-bg-color);
    box-shadow: 0 0 0 1px var(--code-name-shadow-color) inset;
    font-size: 0.8em;
}

.mdx-code-value1,
.mdx-code-value2,
.mdx-code-value3,
.mdx-code-value4,
.mdx-code-value5,
.mdx-code-value6 {
    font-family: @boldFont;
    font-weight: bold;
    margin-left: -0.6em;
    border-radius: 0.5em;
    padding: 0.2em 0.4em;
    color: @docBgColorLight;
    font-size: 0.8em;
}

// 药丸样式右边右边值风格2-样式1
.mdx-code-name1 {}

.mdx-code-value1 {
    background-color: var(--master-color);
    box-shadow: 0 0 0 1px var(--master-color-light) inset;
}

// 药丸样式右边右边值风格2-样式2
.mdx-code-name2 {}

.mdx-code-value2 {
    background-color: var(--third-color);
    box-shadow: 0 0 0 1px var(--third-color-light) inset;
}

// 药丸样式右边右边值风格3-样式3
.mdx-code-name3 {}

.mdx-code-value3 {
    background-color: var(--fourth-color);
    box-shadow: 0 0 0 1px var(--fourth-color-light) inset;
}

// 药丸样式右边右边值风格2-样式4
.mdx-code-name4 {}

.mdx-code-value4 {
    background-color: var(--slave-color);
    box-shadow: 0 0 0 1px var(--slave-color-light) inset;
}

// 药丸样式右边右边值风格2-样式5
.mdx-code-name5 {}

.mdx-code-value5 {
    background-color: var(--fifth-color);
    box-shadow: 0 0 0 1px var(--fifth-color-light) inset;
}

// 药丸样式右边右边值风格2-样式6
.mdx-code-name6 {}

.mdx-code-value6 {
    background-color: var(--sixth-color);
    box-shadow: 0 0 0 1px var(--sixth-color-light) inset;
}

// h6内的code标签强制取消加粗
h6 code {
    font-weight: normal;
}

/**************************************
* 封面、封底
**************************************/

#write>h6:first-of-type,
// 页面第1个H6为封面样式
#write>h6:last-of-type {
    // 页面最后1个H6为封底样式
    display: block;
    color: @themeForeColor  !important;
    font-size: 2.5em;
    font-family: @titleFont;
    font-weight: bold;
    text-align: @coverTextAlign;
    height: 25cm;
    padding-left: 30px;
    padding-top: 150px;
    padding-right: 20px;
    margin: 10px -10px;
    margin-bottom: 3em;
    border: 0;
    border-radius: 15px;
    box-shadow: @contrastBorder;
    background-color: @themeBgColor;
    background-image: @coverBackgroundImage;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
}

// 封底样式微调
#write>h6:last-of-type {
    height: 13cm;
    margin-top: 3em;
    margin-bottom: 10px;
    padding-top: 50px;
}

#write>h6:first-of-type::before,
#write>h6:last-of-type::before {
    content: "";
}

// 封面内的作者信息
#write>h6:first-of-type strong {
    color: @themeForeColorFade;
    font-size: 0.7em;
    font-family: @boldFont;
    font-weight: bold;
    text-decoration: none;
}

// 前缀
#write>h6:first-of-type strong::before {
    content: "By ";
    font-size: 0.8em;
    font-weight: normal;
    text-decoration: none;
}

// 封面内的版权信息
#write>h6:first-of-type em {
    color: @themeForeColorFade;
    font-size: 0.35em;
    font-family: @boldFont;
    font-style: normal;
    vertical-align: sub;
}

// 封面内密级信息
#write>h6:first-of-type code {
    font-size: 0.4em !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

// ---------------
// 针对打印的配置
@media print {

    //   :root {
    //     // 颜色变量
    //     --doc-bg-color: var(--doc-bg-color-light);
    //     --doc-bg-color-alt: var(--doc-bg-color-alt-light);
    //     --fore-color: var(--fore-color-light);
    //     --fore-color-alt: var(--fore-color-alt-light);
    //     --tips-bg-color: var(--tips-bg-color-light);
    //     --tips-bg-color-inset: var(--tips-bg-color-inset-light);
    //     --shadow-color: var(--shadow-color-light);
    //     --a-color: var(--a-color-light);
    //     --theme-bg-color-fade: var(--theme-bg-color-fade-light);
    //     --table-color: var(--table-color-light);
    //     --table-border-color: var(--table-border-color-light);
    //     --table-th-bg-color: var(--table-th-bg-color-light);
    //     --table-th-border-color: var(--table-th-border-color-light);
    //     --img-dark-filter: var(--img-dark-filter-light);
    //     --del-color: var(--del-color-light);
    //     --toc-header-num-color: var(--toc-header-num-color-light);
    //     --content-header-num-color: var(--content-header-num-color-light);
    //     --header-color: var(--header-color-light);
    //     --header-box-shadow: var(--header-box-shadow-light);
    //     --header-bg-start-color: var(--header-bg-start-color-light);
    //     --header-bg-end-color: var(--header-bg-end-color-light);
    //     --code-bg-color: var(--code-bg-color-light);
    //     --code-name-bg-color: var(--code-name-bg-color-light);
    //     --code-name-shadow-color: var(--code-name-bg-color);
    //     --master-color: var(--master-color-light);
    //     --slave-color: var(--slave-color-light);
    //     --third-color: var(--third-color-light);
    //     --fourth-color: var(--fourth-color-light);
    //     --fifth-color: var(--fifth-color-light);
    //     --sixth-color: var(--sixth-color-light);
    //     --sixth-color-alt: var(--sixth-color-alt-light);
    //     --mermaid-master-color: var(--mermaid-master-color-light);
    //     --mermaid-master-color-alt: var(--mermaid-master-color-alt-light);
    //     --mermaid-slave-color: var(--mermaid-slave-color-light);
    //     --mermaid-slave-color-alt: var(--mermaid-slave-color-alt-light);
    //     --mermaid-third-color: var(--mermaid-third-color-light);
    //     --mermaid-third-color-alt: var(--mermaid-third-color-alt-light);
    //     --mermaid-fourth-color: var(--mermaid-fourth-color-light);
    //     --mermaid-fourth-color-alt: var(--mermaid-fourth-color-alt-light);
    //     --mermaid-fifth-color: var(--mermaid-fifth-color-light);
    //     --mermaid-fifth-color-alt: var(--mermaid-fifth-color-alt-light);
    //     --mermaid-sixth-color: var(--mermaid-sixth-color-light);
    //     --mermaid-sixth-color-alt: var(--mermaid-sixth-color-alt-light);
    //   }
    html {
        font-size: 1em;
    }

    #write {
        margin: 0 !important;
    }

    // 显示原始的目录
    #write .md-toc {
        display: block !important;
    }

    // 清空当前章节的样式
    .mdx-header-current {
        background: none !important;
    }

    .mdx-toc {
        display: block !important;
        visibility: visible !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        box-shadow: none !important;
        background: none !important;
    }

    .mdx-table-cross {
        box-shadow: none !important;
        background: none !important;
    }

    //   .mdx-figure-hover,
    .mdx-figure:hover,
    img:hover,
    table:hover {
        border-color: var(--table-border-color) !important;
    }

    .mdx-img-invert-in-dark {
        filter: none;
    }

    //   .mdx-figure-bg-dark {
    //   background-image: url("") !important;  
    //   }
    table:hover {
        border-color: var(--table-border-color) !important;
    }

    blockquote {
        display: block !important;
    }

    .mdx-loading,
    .mdx-tool-tips,
    .mdx-info-tips {
        display: none !important;
    }

    .mdx-current-blockfocus-item {
        box-shadow: none !important;
    }

    .mdx-toolbar,
    .mdx-bread-nav,
    .mdx-toc-box,
    .mdx-toc-box-header,
    .mdx-toc-box-body-scroll,
    //   .mdx-toc-box-footer,
    // .mdx-docbar-top,
    .mdx-docbar-bottom {
        display: none;
        visibility: hidden;
    }

    #write>h6:first-of-type,
    #write>h6:last-of-type,
    #write>h6:first-of-type strong,
    #write>h6:first-of-type em {
        background: none !important;
        background-color: @docBgColorLight  !important;
        color: @foreColorLight  !important;
    }
}

// 结束针对打印的配置
// --------------------  